import { useEffect, useState } from "react"

//useEffect函数，类似于生命周期，在DOM渲染之后执行，第一个参数为回调函数，里面执行逻辑；第二个参数影响useEffect函数执行次数
function A(){
  useEffect(()=>{
    return ()=>{
      console.log('A组件被卸载了')
    }
  },[])
  return <div>我是A组件</div>
}
function App() {
  let [list, setList] = useState([])
  let [show,setShow]=useState(true)
  // 1.第二个参数传入空数组，执行次数为初始渲染时
  useEffect(() => {
    async function getList() {
      const url = 'http://geek.itheima.net/v1_0/channels'
      const res = await fetch(url)
      const jsonRes = await res.json()
      setList(jsonRes.data.channels)
    }
    getList()
  }, [])
  // // 2.第二个参数不传，执行次数为初始渲染时+数据改变时
  // useEffect(() => {
  //   console.log('初始渲染时+数据改变时')
  // })
  // // 3.第二个参数传特定的数据，执行次数为初始渲染时+传入的数据改变时
  // useEffect(() => {
  //   console.log('初始渲染时+传入的数据改变时')
  // },[list])
  return (
    <div className="App">
      <ul>
        {list.map(item=>(
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      {show && <A/>}
      <button onClick={()=>setShow(false)}>卸载A组件</button>
    </div>
  );
}

export default App;
